<template>
  <div id="attestation">
    <div class="md-example-child md-example-child-tabs">
      <md-tabs class="tab-blcok" v-model="selTab" >
        <md-tab-pane class="page-content" name="p1" label="产权注册" :disabled="selTab !== 'p1'">
          <property v-on:nextTo="nextTo"></property>
        </md-tab-pane>
        <md-tab-pane class="page-content" name="p2" label="身份注册" :disabled="selTab !== 'p2'">
          <identity v-on:nextTo="nextTo"></identity>
        </md-tab-pane>
        <md-tab-pane class="page-content" name="p3" label="实名验证" :disabled="selTab !== 'p3'">
          <verify ></verify>
        </md-tab-pane>
      </md-tabs>
    </div>
  </div>
</template>

<script>
import { Tabs, TabPane, Icon } from "mand-mobile";
import Property from "@/components/register/property"; //产权注册
import Identity from "@/components/register/identity"; //身份注册
import Verify from "@/components/register/verify"; //实名验证

export default {
  components: {
    [Icon.name]: Icon,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    Property,
    Identity,
    Verify
  },
  name: "attestation",
  data() {
    return {
      selTab: "p1"
    };
  },
  methods: {
    // 下一步
    nextTo(res) {
      this.selTab = res;
      window.scrollTo(0, 0);
    },
  },
  created() {
    
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
body {
  height: 100%;
}
#attestation {
  .md-tab-bar-list .md-tab-bar-item.is-active {
    color: #2f86f6 !important;
  }
}
</style>
